<script lang="ts" setup>
import { getTopNews } from '~/api/home'
import { decode, encode } from '~/utils/base/dataEncry'
const dayjs = useDayjs()
const list = ref<any[]>([])
const TJlist = ref<any[]>([])
const title = ref('新闻中心')
const routePath = [{ name: '首页', path: '/' }, { name: title }]
const timeNow = ref('')
const valuedate = ref('')
const total = ref(0)
const queryParams = reactive(
    {
        page: {
            rownumber: 10,
            pageNo: 1,
        },
        condition: [],
        positions: '首页'
    },
)
const queryParams1 = reactive(
    {
        page: {
            rownumber: 3,
            pageNo: 1,
        },
        order: [{
            colName: 'release_time',
            orderType: 'desc', // asc升序 desc降序
        }],
        condition: [
            {
                colName: 'column_recommendation',
                ruleType: 'eq',
                value: '是',
            },

        ],
    },
)
const timeYS = ref('background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,#AC8358 89.45%);color:#fff')
const timeNo = ref('background:none;color:#333;border:1px solid rgba(229,229,234,1);')
// 当前时间
const now = dayjs();
// 过去一周
const oneWeekAgo = now.subtract(7, 'day');
// 过去一月
const oneMonthAgo = now.subtract(1, 'month');
// 过去半年
const halfYearAgo = now.subtract(6, 'month'); // 由于月份不是固定天数，这里减去3个月再加1个月以得到半年
// console.log(now.format('YYYY-MM-DD'))
// console.log(oneWeekAgo.format('YYYY-MM-DD'))
// console.log(oneMonthAgo.format('YYYY-MM-DD'))
// console.log(halfYearAgo.format('YYYY-MM-DD'))
function clickTime(item) {
    if (timeNow.value == item) {
        console.log(item)
        timeNow.value = ''
        console.log(timeNow)
        queryParams.condition = []
    } else {
        timeNow.value = item
        valuedate.value = ''
        queryParams.condition = []
        if (item == 1) {
            queryParams.condition.push({
                "colName": "create_time",
                "ruleType": "between",
                "value": [oneWeekAgo.format('YYYY-MM-DD'), now.format('YYYY-MM-DD')]
            })
        } else if (item == 2) {
            queryParams.condition.push({
                "colName": "create_time",
                "ruleType": "between",
                "value": [oneMonthAgo.format('YYYY-MM-DD'), now.format('YYYY-MM-DD')]
            })
        } else if (item == 3) {
            queryParams.condition.push({
                "colName": "create_time",
                "ruleType": "between",
                "value": [halfYearAgo.format('YYYY-MM-DD'), now.format('YYYY-MM-DD')]
            })
        }
    }

    getData()
}
// 分页参数更改
function onPageChange(params: { pageNum: number, pageSize: number }) {
    queryParams.page.pageNo = params.pageNum
    queryParams.page.rownumber = params.pageSize
    getData()
}
function clickItem(item) {
    getTopNews({
        condition: [{ colName: 'id', ruleType: 'eq', value: item.id }],
    },).then(res => {
        navigateTo({
            path: `/peopleHealth/topNewsDetail`,
            query: {
                data: encode(res.data[0]),
            },
        })
    })

}
function getData() {
    getTopNews(queryParams).then((res) => {
        total.value = res.page.total
        list.value = []
        res.data.forEach(element => {
            list.value.push({
                title: element.title_name,
                blurd: extractTextFromPTags(element.contents),
                info: element.origin,
                time: dayjs(element.release_time).format('YYYY-MM-DD'),
                url: element.cover_file_name,
                id: element.id
            })
        })
        TJlist.value = res.data.slice(0, 3)
    }).catch(() => {
    })
}
function getTJData() {
    getTopNews(queryParams1).then((res) => {
        TJlist.value = res.data
    }).catch(() => {
    })
}
onMounted(() => {
    getData()
    getTJData()
})
function timeChange(time) {
    queryParams.condition = []
    console.log(time)
    if (time != null) {
        queryParams.condition.push({
            "colName": "create_time",
            "ruleType": "between",
            "value": time
        })
        getData()
    } else {
        queryParams.condition = []
        getData()

    }
}
function extractTextFromPTags(htmlString: string) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(htmlString, 'text/html');
    const pTags = doc.getElementsByTagName('p');
    let text = '';
    for (let i = 0; i < pTags.length; i++) {
        text += pTags[i]?.textContent;
    }
    return text;
}
</script>

<template>
    <div class="px-40">
        <PublicSearch type="新闻中心" />
        <PublicSearchDialog type="新闻中心"/>
        <div>
            <div class=" bg-#fff">
                <CommonPageContainer :title="title" :path="routePath">
                    <div class="flex justify-between mt-20px">
                        <div class="w-85%">
                            <div class="flex ">
                                <div class=" p-8px rounded-sm cursor-pointer" :style="timeNow == 1 ? timeYS : timeNo"
                                    @click="clickTime(1)">近一周</div>
                                <div class=" p-8px rounded-sm mx-10px cursor-pointer"
                                    :style="timeNow == 2 ? timeYS : timeNo" @click="clickTime(2)">近一月</div>
                                <div class=" p-8px rounded-sm cursor-pointer" :style="timeNow == 3 ? timeYS : timeNo"
                                    @click="clickTime(3)">近半年</div>
                                <div class=" ml-10px">
                                    <el-date-picker style="height:100%" v-model="valuedate" type="daterange"
                                        format="YYYY/MM/DD" value-format="YYYY-MM-DD" range-separator="至"
                                        start-placeholder="开始时间" end-placeholder="结束时间" size="large" @change="timeChange" />
                                </div>
                            </div>
                            <div class="">
                                <PublicList :list="list" @click-item="clickItem"></PublicList>
                                <PublicPagination :total="total" @change="onPageChange" />
                            </div>
                        </div>
                        <div class="w-15%">
                            <div>
                                <div class=" flex items-center py-5px px-10px rounded-tr rounded-tl h-40px"
                                    style="background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,#AC8358 89.45%);">
                                    <img src="/img/tj.png" alt="">
                                    <div class="pl-15px " text="#fff 16px">推荐</div>
                                </div>
                                <div class="py-5px px-10px rounded-br rounded-bl" border="2px solid #AC8358">
                                    <div v-for="item in TJlist" class="cursor-pointer " @click="clickItem(item)"
                                        hover="text-#AC8358">
                                        <img :src="getImgUrl(item.cover_file_name)" class="w-full" alt="">
                                        <div class="py-10px" text="14px">{{ item.title_name }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </CommonPageContainer>
            </div>
        </div>
    </div>
</template>

<style></style>
